<template>
  <div class="app-container">
    <!-- <div class="header">
      <el-form :inline="true" :model="filter" ref="ruleFormRef">
        <el-form-item label="设备名称" prop="username">
          <el-select v-model="filter.type_id" placeholder="请选择" clearable>
            <el-option v-for="item in typeArr" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searChange" :icon="Search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="footer">
      <div class="util" v-if="auth && auth.add">
        <el-button type="success" @click="router.back()" v-if="route.query.id"> 返回 </el-button>
      </div>
      <div class="table-inner">
        <el-table
          class="table"
          v-loading="loading"
          row-key="id"
          :data="list"
          style="width: 100%"
          border
        >
          <template #empty><el-empty description="暂无数据" /></template>
          <el-table-column prop="title" label="房间名称" show-overflow-tooltip align="center">
            <template #default="scope">
              <span v-if="scope.row.room">{{ scope.row.room.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="设备名称" show-overflow-tooltip align="center">
            <template #default="scope">
              <span v-if="scope.row.equipment">{{ scope.row.equipment.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="报损类型" align="center" width="100">
            <template #default="scope">
              <span v-if="scope.row.type == '0'">未知</span>
              <span v-else-if="scope.row.type == '1'">更换</span>
              <span v-else-if="scope.row.type == '2'">维修</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center" width="100">
            <template #default="scope">
              <span v-if="scope.row.status == '0'">未处理</span>
              <span v-else-if="scope.row.status == '1'">进行中</span>
              <span v-else-if="scope.row.status == '2'">完成</span>
              <span v-else-if="scope.row.status == '9'">不予处理</span>
            </template>
          </el-table-column>
          <el-table-column prop="contact" label="报损电话" align="center" width="120" />
          <el-table-column
            prop="remark"
            label="报损措述"
            show-overflow-tooltip
            align="center"
            minWidth="120"
          />
          <el-table-column prop="create_time" label="创建时间" align="center" width="180" />
          <el-table-column prop="operator" label="操作" width="200px" align="center">
            <template #default="scope">
              <div class="juscen">
                <el-dropdown style="margin-right: 10px" @command="commandChange($event, scope.row)">
                  <el-button type="primary" size="small">
                    操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </el-button>
                  <template #dropdown>
                    <el-dropdown-menu style="text-align: center">
                      <el-dropdown-item command="0">未处理</el-dropdown-item>
                      <el-dropdown-item command="1">进行中</el-dropdown-item>
                      <el-dropdown-item command="2">完成</el-dropdown-item>
                      <el-dropdown-item command="9">不予处理</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
                <el-button
                  type="danger"
                  size="small"
                  icon="Delete"
                  @click="del(scope.row)"
                  v-if="auth && auth.delete"
                >
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <el-pagination
          v-model:currentPage="query.page"
          :page-size="query.limit"
          :total="total"
          background
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ElMessageBox, ElMessage, FormInstance, ElNotification } from 'element-plus'
  import { Search } from '@element-plus/icons-vue'
  import { nextTick, onMounted, reactive, ref } from 'vue'
  import { damagedIndex, damagedDelete, damagedModify } from '@/api/admin'
  import { useRoute, useRouter } from 'vue-router'
  const router = useRouter()
  const route = useRoute()
  const loading = ref(true)
  const list = ref()
  const total = ref(0)
  const query = reactive({
    page: 1,
    limit: 10,
  })
  const filter = reactive({
    equipment_id: '',
  })
  const auth = ref()

  const getList = () => {
    loading.value = true
    damagedIndex(query).then((res) => {
      if (res.code == 200) {
        auth.value = res.data.auth
        list.value = res.data.data
        total.value = res.data.count
      }
      loading.value = false
    })
  }

  const del = (row) => {
    ElMessageBox.confirm(`你确定要删除吗?`, '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    }).then(() => {
      damagedDelete({
        id: row.id,
      }).then((res) => {
        if (res.code == 200) {
          ElNotification({
            title: res.data,
            message: res.msg,
            type: 'success',
          })
          getList()
        }
      })
    })
  }
  const handleSizeChange = (val: number) => {
    query.page = 1
    query.limit = val
    getList()
  }

  const handleCurrentChange = (val: number) => {
    query.page = val
    getList()
  }

  const searChange = () => {
    query.filter = JSON.stringify(filter)
    query.page = 1
    getList()
  }
  const reset = () => {
    filter = ''
    searChange()
  }

  const commandChange = (value, row) => {
    damagedModify({
      id: row.id,
      field: 'status',
      value: value,
    }).then((res) => {
      if (res.code == 200) {
        ElNotification({
          title: `操作成功`,
          message: res.msg,
          type: 'success',
        })
        query.page = 1
        getList()
      }
    })
  }

  nextTick(() => {
    if (route.query.id) {
      filter.equipment_id = route.query.id
      query.filter = JSON.stringify(filter)
    }
    getList()
  })
</script>

<style scoped lang="scss">
  .header {
    display: flex;
    padding: 16px 16px 0px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
  }

  .footer {
    flex: 1;
    display: flex;
    padding: 16px;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 12px rgb(0 0 0 / 5%);
    position: relative;
    box-sizing: border-box;

    .util {
      margin-bottom: 15px;
      display: flex;
      justify-content: flex-end;
      flex-shrink: 0;
    }

    .table-inner {
      flex: 1;
      position: relative;
    }

    .table {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    .pagination {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      padding-top: 20px;
      box-sizing: border-box;
      flex-shrink: 0;
    }
  }

  .juscen {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
